<!DOCTYPE html>
<html>
<head>
    <title>代码生成器</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="libs/jquery.min.js"></script>
    <script src="plugins/layer/layer.js"></script>
    <script src="libs/bootstrap.min.js"></script>
    <script src="libs/vue.min.js"></script>
    <script src="plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div id="rrapp">
    <div class="grid-btn">
		<div class="row">
			<div class="form-group col-sm-9">
				<input type="text" class="form-control" v-model="q.tableName" @keyup.enter="query" placeholder="表名">
			</div>
			<div class="col-sm-3">
				<a class="btn btn-default" @click="query">查询</a>
				<a class="btn btn-primary" @click="generator"><i class="fa fa-file-code-o"></i>&nbsp;生成代码</a>
                <a class="btn btn-default" @click="openDirectory">打开文件目录</a>
			</div>
		</div>
		<div class="row">
            <div class="form-group">
                <button class="btn btn-default" @click="selectAll">全选</button>
            </div>
			<div class="form-group checkbox">
                <div class="row">
                    <p>服务</p>
                    <template v-for="item in templates">
                        <label class="col-sm-2" style="margin-bottom: 10px">
                            <input type="checkbox" name="template" v-bind:value="item.tempPath" v-model="templatesValue"> {{item.tempName}}
                        </label>
                    </template>
                </div>
                <div class="row">
                    <p>前端</p>
                    <template v-for="item in front_templates">
                        <label class="col-sm-2" style="margin-bottom: 10px">
                            <input type="checkbox" name="template" v-bind:value="item.tempPath" v-model="templatesValue"> {{item.tempName}}
                        </label>
                    </template>
                </div>
			</div>
		</div>
    </div>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
<script type="text/javascript">

	$(function () {
		$("#jqGrid").jqGrid({
			url: 'sys/generator/list',
			datatype: "json",
			colModel: [
				{ label: '表名', name: 'tableName', width: 100, key: true },
				{ label: 'Engine', name: 'engine', width: 70},
				{ label: '表备注', name: 'tableComment', width: 100 },
				{ label: '创建时间', name: 'createTime', width: 100 }
			],
			viewrecords: true,
			height: 385,
			rowNum: 10,
			rowList : [10,30,50,100,200],
			rownumbers: true,
			rownumWidth: 25,
			autowidth:true,
			multiselect: true,
			pager: "#jqGridPager",
			jsonReader : {
				root: "page.list",
				page: "page.currPage",
				total: "page.totalPage",
				records: "page.totalCount"
			},
			prmNames : {
				page:"page",
				rows:"limit",
				order: "order"
			},
			gridComplete:function(){
				//隐藏grid底部滚动条
				$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
			}
		});


	});

	var vm = new Vue({
		el:'#rrapp',
		data:{
			q:{
				tableName: null
			},
            templates:[],
            front_templates:[],
            templatesValue:[],
            isAllSelect: false
		},
        created: function () {
            //获取模板列表
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType : "application/json",
                url: "sys/generator/listTemplate",
                data:{},
                success: function (result) {
                    if (result.code === 0) {
                        vm.templates = result.data.service
                        vm.front_templates = result.data.front
                    }else {
                        alert("状态"+result.msg)
                    }
                }
            })
        },
		methods: {
			query: function () {
				$("#jqGrid").jqGrid('setGridParam',{
					postData:{'tableName': vm.q.tableName},
					page:1
				}).trigger("reloadGrid");
			},
			generator: function() {
				var tableNames = getSelectedRows();
				if(tableNames == null){
					return ;
				}
				$.ajax({
					type: "POST",
					dataType: "json",
					contentType : "application/json",
					url: "sys/generator/code",
					data:JSON.stringify({
						tables : tableNames.join(),
                        templates : vm.templatesValue
					}),
					success: function (result) {
						if (result.code === 0) {
							alert("success");
						}else {
							alert("状态"+result.msg)
						}
					}
				})
			},
            selectAll: function() {
                if (!this.isAllSelect) {
                    this.templatesValue = this.templates.map(i => i.tempPath);
                    this.isAllSelect = true;
                }else{
                    this.templatesValue = []
                    this.isAllSelect = false;
                }
            },
            openDirectory: function() {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType : "application/json",
                    url: "sys/generator/openDirectory",
                    data:{},
                    success: function (result) {
                        if (result.code !== 0) {
                            alert("状态"+result.msg)
                        }
                    }
                })
            }
		},
        //渲染完后执行
        updated:function (){
            //初始化Icheck
            // $('.checkbox input').iCheck({
            //     checkboxClass: 'icheckbox_square-blue',
            //     radioClass: 'iradio_square',
            //     increaseArea: '20%'
            // });
        }

	});

</script>

</body>
</html>